<template>
  <div class="table-all">
    <!-- 搜索区 -->
    <div class="app-container search-box">
      <SearchForm
        :form="searchData.form"
        :options="searchData.options"
        @searchUpdate="search"
        @resetSearchData="resetSearchData"
        @toLoadMethods="toLoadMethods"
      ></SearchForm>
    </div>
    <div class="app-container" style="color: #606266" v-show="showAreaInfo">
      <el-row :gutter="20">
        <div class="title">区县参与指标填报情况</div>
        <el-col :span="4" class="col" v-for="item in areaDataList">
          <div class="div_title">{{item.areaName}}，<span class="div_num">{{item.count}}个。</span></div>
        </el-col>
      </el-row>
    </div>
    <!-- 按钮区 -->
    <div class="app-container table-box">
      <div class="table-main">
      <span class="table-col-select-container">
      <div class="table-title"><div style="float: left">城市详情信息</div></div>
      <div class="top-button-list">
         <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
      </div>
      </span>
        <el-table
          :data="tableData"
          :span-method="mergeMethod"
          v-if="tableMainHeight>0"
          :fit="true"
          :border="true"
          :stripe="true"
          :cell-style="{ borderColor:'#f0f0f0',padding: 5 }"
          :header-cell-style="{ borderColor:'#f0f0f0', backgroundColor: '#FAFAFA' }"
          :show-header="true"
          style="width: 100%"
          :max-height = "tableMainHeight"
          v-loading="loading"
        >
          <el-table-column
            v-for="(item, index) in tableColumn"
            :prop="item.prop"
            :label="item.label"
            :align="item.align"
            :width="item.minWidth"
            :key="index"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { cityDetailDetail,
    cityDetailDetailExport,
    cityTargetAreaCount
  } from '@/api/risk/cityWaringResult'
  import { getAreaList } from '@/api/system/area'
  import SearchForm from '@/components/searchForm/index'
  import ButtonForm from '@/components/ButtonForm/index'
  export default {
    components:{
      SearchForm,ButtonForm
    },
    data(){
      return{
        showAreaInfo:false,
        areaDataList:[],
        tableColumn:[
          {
            prop: 'oneTargetName',
            label: '指标大类',
            // minWidth: '150',
            slotname: 'oneTargetName',
            options: {}
          },
          {
            prop: 'twoTargetName',
            label: '指标细类',
            // minWidth: '150',
            slotname: 'twoTargetName',
            options: {}
          },
          {
            prop: 'threeTargetName',
            label: '指标名称',
            // minWidth: '220',
            slotname: 'threeTargetName',
            options: {}
          },
          {
            prop: 'checkType',
            label: '体检分类',
            // minWidth: '120',
            slotname: 'checkType',
            options: {}
          },
          {
            prop: 'year',
            label: '年份',
            // minWidth: '100',
            slotname: 'year',
            options: {}
          },
          {
            prop: 'rules',
            label: '指标参考值',
            // minWidth: '120',
            slotname: 'rules',
            options: {}
          },
          {
            prop: 'value',
            label: '指标实际值',
            // minWidth: '220',
            slotname: 'value',
            options: {}
          },
          {
            prop: 'result',
            label: '指标结果',
            // minWidth: '220',
            slotname: 'result',
            options: {}
          }
        ],
        tableData:[],
        selection: [],
        loading:false,
        total:1,
        pageNum:1,
        pageSize:10,
        dict:{},
        searchData:{
          form:{
            cityCode:"",
            year:"",
            checkType:""
          },
          options:[
            {
              title:'当前城市',
              key: "cityCode",
              type: "select",
              option: {
                data: this.cityList,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "areaName", // 指定label对应data的字段
                  value: "areaCode", // 指定value对应data的字段
                },
              },
            },
            {
              title:'年份',
              key: "year",
              type: "dateYear",
            },
            {
              title:'体检分类',
              key: "checkType",
              type: "select",
              multiple:false,
              option: {
                data: this.cityCheckTypeOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "valueText", // 指定value对应data的字段
                },
              },
            },
          ]
        },
        buttonList:[
          {name:'导出数据',methods:'handleExport', type:'primary', hasPremission:["cityDetailDetail:export"]}
        ],
        tableMainHeight: 0,
        // 字典
        cityCheckTypeOptions:[],
        cityCheckResultTypeOptions: [],
        cityList:[],
        // 合并存储
        mergeFirstColumn:[],
        firstColumnIndex:0,
        mergeSecondColumn:[],
        secondColumnIndex:0,
      }
    },
    watch: {
      'cityList':{
        handler(newVal, oldVal){
          if(newVal){
            this.searchData.options.forEach(t=>{
              if(t.key == 'cityCode'){
                t.option.data = newVal
              }
            })
          }
        }
      },
      'cityCheckTypeOptions':{
        handler(newVal, oldVal){
          if(newVal){
            this.searchData.options.forEach(t=>{
              if(t.key == 'checkType'){
                // t.option.data = newVal
                // 过滤满意度
                t.option.data = newVal.filter(t=>t.value!=3)
              }
            })
          }
        }
      },
      'cityCheckResultTypeOptions':{
        handler(newVal, oldVal){
          if(newVal){
            this.searchData.options.forEach(t=>{
              if(t.key == 'resultType'){
                t.option.data = newVal
              }
            })
          }
        }
      }
    },
    methods:{
      getCityTargetAreaCount(params){
        cityTargetAreaCount(params).then(res=>{
          if(res.code==200){
             this.areaDataList = res.data
          }
        })
      },
      // 遍历每一行数据判断合并几行（仅对一二列）
      formatMergeData() {
        // 重置
        this.mergeFirstColumn = [];
        this.firstColumnIndex = 0;
        this.mergeSecondColumn = [];
        this.secondColumnIndex = 0;
        for (let i = 0; i < this.tableData.length; i++) {
          if (i == 0) {
            this.mergeFirstColumn.push(1);
            this.mergeSecondColumn.push(1);
          } else {
            if ( this.tableData[i]["oneTargetName"] == this.tableData[i - 1]["oneTargetName"]) {
              this.mergeFirstColumn[this.firstColumnIndex] += 1;
              this.mergeFirstColumn.push(0);
              if (this.tableData[i]["twoTargetName"] ==  this.tableData[i - 1]["twoTargetName"]) {
                this.mergeSecondColumn[this.secondColumnIndex] += 1;
                this.mergeSecondColumn.push(0);
              } else {
                this.mergeSecondColumn.push(1);
                this.secondColumnIndex = i;
              }
            } else {
              this.mergeFirstColumn.push(1);
              this.firstColumnIndex = i;
              this.mergeSecondColumn.push(1);
              this.secondColumnIndex = i;
            }
          }
        }
      },
      mergeMethod({ row, column, rowIndex, columnIndex }) {
        // 合并第一列
        if (columnIndex == 0) {
          let rowSpan = this.mergeFirstColumn[rowIndex];
          return {
            rowspan: rowSpan,
            colspan: rowSpan > 0 ? 1 : 0,
          };
        }
        // 合并第二列
        if (columnIndex == 1) {
          let rowSpan = this.mergeSecondColumn[rowIndex];
          return {
            rowspan: rowSpan,
            colspan: rowSpan > 0 ? 1 : 0,
          };
        }
      },
      toLoadMethods(methods) {
        this[methods]()
      },
      search(){
        this.fetch({
          ...this.searchData.form,
        })
      },
      async fetch(params={}){
        params.pageSize = this.pageSize
        params.pageNum = this.pageNum
        this.loading = true
        cityDetailDetail(params).then(res=>{
          if(res.code==200){
            this.tableData = res.data
            this.formatMergeData()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final=>{
          this.loading = false
        })
        this.getCityTargetAreaCount(params)
      },
      // 重置搜索条件
      resetSearchData(){
        // 调整
        this.searchData.form = {
          cityCode: this.$route.query.cityCode,
          year: this.$route.query.year,
          checkType:this.$route.query.checkType,
        }
        if(undefined!=this.$route.query.targetCode){
          this.searchData.form.targetCode = this.$route.query.targetCode
        }
      },
      // 触发按钮区域按钮方法
      clickButton(methods){
        this[methods]()
      },
      async handleExport(){
        let params = {
          ...this.searchData.form,
        }
        cityDetailDetailExport(params,`城市详情_${new Date().getTime()}.xlsx`);
      },
    },
    activated(){
      // 调整
      this.showAreaInfo = this.$route.query.showAreaInfo ? true : false
      this.resetSearchData()
      this.fetch(this.searchData.form)
    },
    created(){
      // 获取字典值
      this.cityCheckTypeOptions = []
      this.$commonJs.filterDataDict("cityCheckType",this.cityCheckTypeOptions)
      this.cityCheckResultTypeOptions = []
      this.$commonJs.filterDataDict("cityCheckResultType",this.cityCheckResultTypeOptions)
      getAreaList({parentCode:"440000000000"}).then(res=>{
        if(res.code==200){
          this.cityList = res.data
        }
      })
      this.$commonJs.setLeftMenuHidden(this)
    },
    mounted(){
      this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
    }
  }
</script>

<style lang="scss" scoped>
  .table-all {
    display: flex;
    flex-direction: column;
    height: 100%;

    .search-box {
      padding-bottom: 6px;
    }

    .table-box {
      padding-top: 10px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .table-main {
        flex: 1;
        overflow: auto;
      }

      .table-page {
        // padding-top: 10 px;
        // padding-bottom: 10 px;
      }

      ::v-deep .pagination-container {
        text-align: right;
      }

    }
    //-----------------------------
    ::v-deep .el-table th{
      padding: 10px 0;
    }
    ::v-deep .el-table td{
      padding: 8px 0;
    }
    .table-col-select-container{
      // float: right;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .table-title{
        font-size: 16px;
      }
    }
    .table-col-select-list-container {
      // 让每一个单选按钮单行排版 并具有一定的边距
      ::v-deep .el-checkbox {
        display: block;
        margin: 5px 10px;
      }
    }
    .top-button-list{
      display: flex;
      align-items: baseline;
    }


    // 2023.9.9 按运管服的样式进行了修改 ----------------开始-------------------------
    .btn_content{
      margin-bottom: 0px;
    }
    ::v-deep .el-dropdown{
      font-size: 20px;
      top: 2px;
      cursor: pointer;
    }
    // 2023.9.9 按运管服的样式进行了修改 ----------------结束-------------------------
    .title{
      border-bottom: 1px solid #f1f1f1;
      padding-bottom: 5px;
      margin-bottom: 5px;
      margin-right: 10px;
    }
    .col{
      text-align: center;
      margin: 5px;
      padding: 5px;
    }
    .div_title{
      font-size: 18px;
      padding-bottom: 5px;
    }
    .div_num{
      font-size: 18px;
      font-weight: 900;
    }
  }
</style>
